<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    :label-position="'top'"
    :rules="rules"
  >
    <el-form-item prop="repaired">
      <span slot="label"
        >维修员接单上限 <br />
        <span style="color: #808080; font-size: 12px"
          >用以控制维修员可同时接收未完成的【维修单+维护单】数量上限</span
        ></span
      >
      <el-input
        ref="repairedLimit"
        v-model="form.repaired"
        maxlength="2"
        oninput="value=value.replace(/[^0-9]/g,'')"
        :disabled="!isEdit"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        v-if="!isEdit"
        type="primary"
        @click="
          () => {
            isEdit = true;
          }
        "
        >编辑</el-button
      >
      <el-button v-if="isEdit" type="primary" @click="onSubmit">保存</el-button>
      <el-button v-if="isEdit" @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isEdit: false,
      form: {
        desc1: "",
        repaired: null,
      },
      rules: {
        repaired: [
          {
            required: true,
            message: "请输入维修员接单上限",
            // validator: (rule, value, callback) => {
            //   console.log(value, "++value++");
            //   if (!value) {
            //     callback(new Error("请输入维修员接单上限"));
            //     return;
            //   } else if (value == 0) {
            //     callback(new Error("接单上限不能为0"));
            //     return;
            //   } else {
            //     callback();
            //   }
            //},
            //trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["system_deviceCategory", "app"]),
  },
  created() {
    this.query();
  },
  mounted() {
    // this.query();
  },
  methods: {
    async query() {
      await this.$store.dispatch("system_deviceCategory/requestRepaired");

      this.form.repaired = this.$store.state.system_deviceCategory.repaired;
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch(
              "system_deviceCategory/saveRepairedInfo",
              this.form.repaired
            )
            .then((res) => {
              this.isEdit = false;
            });
        }
      });
    },
    async onCancel() {
      await this.$store.dispatch("system_deviceCategory/requestRepaired");
      this.form.repaired = this.$store.state.system_deviceCategory.repaired;

      this.isEdit = false;
    },
  },
};
</script>
